<template>
    <div class='tmp'>
        <ul class="mui-table-view mui-grid-view">
            <li class="mui-table-view-cell mui-media mui-col-xs-6"
                v-for='item in goodslist'>
                <router-link v-bind='{to:"/photo/goodsinfo/"+item.id}'>
                    <img class="mui-media-object" :src="item.img_url">
                    <p class="mui-media-body">{{item.title}}</p>
                    <p style='font-size: 14px; color:red'>原价：<s style='color: #000;'>{{item.market_price}}</s> &nbsp; 优惠价：<strong>{{item.sell_price}}</strong>&nbsp;库存：{{item.stock_quantity}}</p>
                    <p style='font-size: 12px; color:#777777'>{{item.zhaiyao}}</p>
                </router-link>
            </li>
            <div class='pageindex' @click='getpageindex'>加载更多</div>
        </ul>

    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    import common from '../../components/field/getfield.js'
    export default{
        data(){
            return {
                goodslist:[],
                pageindex:1
            }
        },
        methods:{
            getgoodslist(){
                let url = common.apidomain+'/api/getgoods?pageindex='+this.pageindex;
                this.$http.get(url).then(res=>{
                    if(res.body.message.length!=0){
                        this.goodslist=this.goodslist.concat(res.body.message)
                    }else {
                        if(this.pageindex>1){Toast('没有商品了')};
                        this.pageindex--;
                    }
                })
            },
            getpageindex(){
                this.pageindex++;
                this.getgoodslist();
            }
        },
        created(){
            this.getgoodslist()
        }
    }
</script>
<style scoped>
    div,ul,li,a{
        box-sizing: border-box !important;
    }
    .mui-table-view.mui-grid-view{
        padding: 0px 0px 10px 0px !important;
    }
    div.tmp > ul li > a > img{
        min-height: 80px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell{
        box-shadow:0 1px 3px rgba(0, 0, 0, .3) !important;
        /*box-shadow: 0 1px 2px rgba(0, 0, 0, .3);*/
    }
    .mui-table-view-cell > a:not(.mui-btn){
        white-space: normal;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
        height:auto !important;
        padding: 0 5px 0 5px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell[data-v-71b706f0]{
        padding: 5px 0 5px 0;
        width:50%;
        box-sizing: border-box;
        margin: 0px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn){
        margin: 0px;
    }
    .pageindex{
        margin: 10px 10% 0 10% ;
        font-size: 20px;
        width:80%;
        height: 40px;
        border: 1px solid #a8a8a8;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
    }
</style>